import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { User, FileText, Heart, Users, Brain } from "lucide-react";
import { useState } from "react";
import { Profile as ProfileType } from "@/types/profile";
import { ProfileHeader } from "@/components/profile/ProfileHeader";
import { MyResources } from "@/components/profile/MyResources";
import { MyFavorites } from "@/components/profile/MyFavorites";
import { MyGroups } from "@/components/profile/MyGroups";
import { SelfAssessment } from "@/components/SelfAssessment";
import { EditProfileDialog } from "@/components/profile/EditProfileDialog";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRole } from "@/contexts/RoleContext";

const Profile = () => {
  const { t } = useLanguage();
  const { role } = useRole();
  const [profile, setProfile] = useState<ProfileType>({
    name: "Alex Chen",
    bio: "Passionate learner exploring the intersection of technology and human behavior. I enjoy collaborative projects and creative problem-solving.",
    interests: ["Psychology", "Data Science", "Education Technology", "Human-Computer Interaction"],
    learningStyle: "Visual",
    email: "alex.chen@example.com"
  });
  
  const handleProfileUpdate = (updatedProfile: ProfileType) => {
    setProfile(updatedProfile);
  };

  const getAssessmentTabLabel = () => {
    return role === 'teacher' ? 'Teaching Assessment' : t('profile.selfAssessment');
  };
  
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      
      <main className="flex-1 py-12 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
              {/* Left sidebar with quick stats */}
              <div className="lg:col-span-1 space-y-6">
                <ProfileHeader profile={profile} onProfileUpdate={handleProfileUpdate} />
                
                {/* Quick Stats Card */}
                <div className="bg-white rounded-lg p-4 shadow-sm border">
                  <h3 className="font-semibold text-sm text-gray-700 mb-3">{t('profile.quickStats')}</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>{t('profile.activeProjects')}</span>
                      <span className="font-medium text-blue-600">5</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>{t('profile.savedResources')}</span>
                      <span className="font-medium text-green-600">12</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>{t('profile.groupMemberships')}</span>
                      <span className="font-medium text-purple-600">3</span>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Main content area */}
              <div className="lg:col-span-4">
                <div className="bg-white rounded-lg shadow-sm border">
                  <Tabs defaultValue="self-assessment" className="w-full">
                    <div className="border-b px-6 pt-6">
                      <TabsList className="w-full grid grid-cols-4 bg-gray-50">
                        <TabsTrigger value="self-assessment" className="text-xs md:text-sm">
                          <Brain className="mr-1 h-4 w-4" />
                          <span className="hidden sm:inline">{getAssessmentTabLabel()}</span>
                        </TabsTrigger>
                        <TabsTrigger value="resources" className="text-xs md:text-sm">
                          <FileText className="mr-1 h-4 w-4" />
                          <span className="hidden sm:inline">{t('profile.myResources')}</span>
                        </TabsTrigger>
                        <TabsTrigger value="favorites" className="text-xs md:text-sm">
                          <Heart className="mr-1 h-4 w-4" />
                          <span className="hidden sm:inline">{t('profile.myFavorites')}</span>
                        </TabsTrigger>
                        <TabsTrigger value="groups" className="text-xs md:text-sm">
                          <Users className="mr-1 h-4 w-4" />
                          <span className="hidden sm:inline">{t('profile.myGroups')}</span>
                        </TabsTrigger>
                      </TabsList>
                    </div>
                    
                    <div className="p-6">
                      <TabsContent value="self-assessment">
                        <SelfAssessment />
                      </TabsContent>
                      
                      <TabsContent value="resources">
                        <MyResources />
                      </TabsContent>
                      
                      <TabsContent value="favorites">
                        <MyFavorites />
                      </TabsContent>
                      
                      <TabsContent value="groups">
                        <MyGroups />
                      </TabsContent>
                    </div>
                  </Tabs>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  );
};

export default Profile;
